@import url('framework.less');
@gray1: #F9F9F9;
@tabIconWidth: 22px;

#app{
    width:100%;
    height: 100%;
}

//loading 页背景
.popup-loading{
    background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
    background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
}


//loading canvas 动画
.canvas{
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: baseline;
}

//code
pre{
    overflow: auto;
    background-color: #f2f2f2;
    padding: 10px;
}

//navbar
.navbar-inner{
    .right{
        //height: 44px;
        a{
            font-size: 16px;

        }
    }
}


//icon
i.icon {
    display: inline-block;
    vertical-align: middle;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    font-style: normal;
    position: relative;

    &.icon-back {
        width: 12px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='@{themeColor}'/></svg>");
    }

    &.icon-tab {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{lightblue}' d='M1.313 30.688H23.5V8.5H1.314v22.188zM0 31.375V7.187h24.813V32H0v-.625zm31.375-6.562h-5.25V23.5h4.563V1.312H8.5v4.563H7.187V0H32v24.813h-.625z' /></g></svg>");
    }

    &.icon-list-fill {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{lightblue}' d='M0 31.313V0h32v32H0v-.688zM12.5 6.938v1.438h15.313V6.938H12.5zm0 8.375v1.375h15.313v-1.375H12.5zm0 8.312v1.438h15.313v-1.438H12.5zM6.938 9.063c.75 0 1.438-.688 1.438-1.438S7.688 6.25 6.938 6.25s-1.375.625-1.375 1.375.625 1.438 1.375 1.438zm0 8.312c.75 0 1.438-.625 1.438-1.375s-.688-1.375-1.438-1.375S5.563 15.25 5.563 16s.625 1.375 1.375 1.375zm0 8.375c.75 0 1.438-.625 1.438-1.375s-.688-1.438-1.438-1.438-1.375.688-1.375 1.438.625 1.375 1.375 1.375z' /></g></svg>");
    }

    &.icon-layer {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{orange}' d='M0 17.563l2.688-1.875 1 .875-1.563 1.063L16.313 28.5l13.625-10.874-1.5-1.063.938-.875L32 17.563 16.314 30.126zM15.563 1.625L31 12.75l.25-.25v-1.125l-.312-.188L15.5 23.5h1.563l-16-12.313-.313.188V12.5l.313.25L17 1.687zM32 11.938L16.312 24.5 0 11.94 16.31.625z' /></g></svg>");
    }

    &.icon-timer {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{themeColor}' d='M16.125 0C24.875.063 32 7.188 32 16s-7.188 16-16 16S0 24.812 0 16c0-4.313 1.75-8.25 4.5-11.125l.25-.25.875.938-.125.125C2.875 8.313 1.25 12 1.25 16c0 8.126 6.625 14.75 14.75 14.75S30.75 24.127 30.75 16c0-8.062-6.563-14.687-14.625-14.75v7.064h-1.25V0h1.25zm-7 9.063l8.938 6.438s.438.876-.5 1.876-2.125.688-2.125.688z' /></g></svg>");
    }

    &.icon-add {
        background-size: 20px 20px;
        width: 22px;
        height: 32px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 32'><g><path fill='@{themeColor}' d='M10.25 26.875V4.5h1.938v22.375H10.25zM0 16.625V14.75h22.375v1.875H0z' /></g></svg>");
    }

    &.icon-plus,&.icon-close {
        background-size: 26px 26px;
        width: 22px;
        height: 32px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 32'><g><path fill='@{white}' d='M10.25 26.875V4.5h1.938v22.375H10.25zM0 16.625V14.75h22.375v1.875H0z' /></g></svg>");
    }


    &.icon-more {
        background-size: 20px 20px;
        width: 29px;
        height: 32px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 32'><g><path fill='@{themeColor}' d='M5.125 16c0-1.063-.875-1.938-1.938-1.938S1.25 14.937 1.25 16s.874 1.938 1.937 1.938S5.125 17.063 5.125 16zM0 16c0-1.75 1.438-3.188 3.188-3.188S6.376 14.25 6.376 16s-1.438 3.188-3.188 3.188S0 17.75 0 16zm16.625 0c0-1.063-.813-1.938-1.875-1.938s-1.938.875-1.938 1.938.875 1.938 1.938 1.938 1.875-.875 1.875-1.938zM11.5 16c0-1.75 1.5-3.188 3.25-3.188S17.938 14.25 17.938 16s-1.438 3.188-3.188 3.188S11.5 17.75 11.5 16zm16.688 0c0-1.063-.875-1.938-1.938-1.938s-1.938.875-1.938 1.938.875 1.938 1.938 1.938 1.938-.875 1.938-1.938zm-5.125 0c0-1.75 1.438-3.188 3.188-3.188S29.44 14.25 29.44 16s-1.44 3.188-3.19 3.188S23.064 17.75 23.064 16z' /></g></svg>");
    }

    &.icon-heart {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{white}' d='M16.375 27c.188.125.313.25.375.375v-.125l-.313-.25c-.875-.688-1.938-1.5-2.938-2.25-1.5-1.125-2.626-2-3.126-2.5C2 14.562-1.314 7.625 3.374 3.312c2.313-2.125 4.75-2.5 7.313-1.625 1 .313 1.938.813 2.813 1.438.625.438 1.063.813 1.438 1.125l.875.813.813-.813c.375-.313.813-.688 1.438-1.125C18.94 2.5 19.877 2 20.877 1.687c2.563-.875 5-.5 7.313 1.625 4.688 4.313 1.375 11.25-7 18.938-.5.5-1.625 1.375-3.125 2.5-1 .75-2.063 1.563-2.938 2.25l-.313.25v.125c.063-.125.25-.25.438-.375.438-.25.938-.188 1.313.063l-.75-.563-.75.563c.375-.25.875-.313 1.313-.063zm-.687 1c-.938-.688-4.875-3.688-6.125-4.813-6.375-5.875-13.438-14.875-7-20.813 6-5.5 12.375.188 13.25 1 .875-.813 7.188-6.5 13.188-1 6.44 5.938-.624 14.938-7 20.813-1.25 1.125-5.187 4.125-6.124 4.813 0 0 0 .125-.063.063-.063.063-.125-.063-.125-.063z' /></g></svg>");
    }


    &.icon-heart-fill {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{yellow}' d='M16.375 27c.188.125.313.25.375.375v-.125l-.313-.25c-.875-.688-1.938-1.5-2.938-2.25-1.5-1.125-2.626-2-3.126-2.5C2 14.562-1.314 7.625 3.374 3.312c2.313-2.125 4.75-2.5 7.313-1.625 1 .313 1.938.813 2.813 1.438.625.438 1.063.813 1.438 1.125l.875.813.813-.813c.375-.313.813-.688 1.438-1.125C18.94 2.5 19.877 2 20.877 1.687c2.563-.875 5-.5 7.313 1.625 4.688 4.313 1.375 11.25-7 18.938-.5.5-1.625 1.375-3.125 2.5-1 .75-2.063 1.563-2.938 2.25l-.313.25v.125c.063-.125.25-.25.438-.375.438-.25.938-.188 1.313.063l-.75-.563-.75.563c.375-.25.875-.313 1.313-.063zm-.687 1c-.938-.688-4.875-3.688-6.125-4.813-6.375-5.875-13.438-14.875-7-20.813 6-5.5 12.375.188 13.25 1 .875-.813 7.188-6.5 13.188-1 6.44 5.938-.624 14.938-7 20.813-1.25 1.125-5.187 4.125-6.124 4.813 0 0 0 .125-.063.063-.063.063-.125-.063-.125-.063z' /></g></svg>");
    }

    &.icon-heart-gray {
        background-size: 16px 16px;
        width: 16px;
        height: 16px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{gray}' d='M16.375 27c.188.125.313.25.375.375v-.125l-.313-.25c-.875-.688-1.938-1.5-2.938-2.25-1.5-1.125-2.626-2-3.126-2.5C2 14.562-1.314 7.625 3.374 3.312c2.313-2.125 4.75-2.5 7.313-1.625 1 .313 1.938.813 2.813 1.438.625.438 1.063.813 1.438 1.125l.875.813.813-.813c.375-.313.813-.688 1.438-1.125C18.94 2.5 19.877 2 20.877 1.687c2.563-.875 5-.5 7.313 1.625 4.688 4.313 1.375 11.25-7 18.938-.5.5-1.625 1.375-3.125 2.5-1 .75-2.063 1.563-2.938 2.25l-.313.25v.125c.063-.125.25-.25.438-.375.438-.25.938-.188 1.313.063l-.75-.563-.75.563c.375-.25.875-.313 1.313-.063zm-.687 1c-.938-.688-4.875-3.688-6.125-4.813-6.375-5.875-13.438-14.875-7-20.813 6-5.5 12.375.188 13.25 1 .875-.813 7.188-6.5 13.188-1 6.44 5.938-.624 14.938-7 20.813-1.25 1.125-5.187 4.125-6.124 4.813 0 0 0 .125-.063.063-.063.063-.125-.063-.125-.063z' /></g></svg>");
    }

    //&.icon-star {
    //    background-size: 20px 20px;
    //    width: 32px;
    //    height: 32px;
    //    .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{lightblue}' d='M6 30l3.813-11.438L0 11.437l12.063.063L15.75 0l3.75 11.5 12.064-.063-9.813 7.125L25.565 30l-9.813-7.125zm2.313-3.125l7.438-5.438 7.5 5.438-2.874-8.813 7.5-5.375h-9.25l-2.875-8.75-2.812 8.75h-9.25l7.5 5.375z' /></g></svg>");
    //}

    &.icon-star {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{white}' d='M15.75 22.875L6 30l3.813-11.438L0 11.437l12.063.063L15.75 0l3.75 11.5 12.064-.063-9.813 7.125L25.565 30z' /></g></svg>");
    }

    &.icon-star-fill {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{yellow}' d='M15.75 22.875L6 30l3.813-11.438L0 11.437l12.063.063L15.75 0l3.75 11.5 12.064-.063-9.813 7.125L25.565 30z' /></g></svg>");
    }

    &.icon-chats {
        background-size: 20px 20px;
        width: 20px;
        height: 20px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{white}' d='M26.125 20.75c-.063-.125-.063-.188-.125-.313 0-.063-.063-.063-.063-.125-.5-1.125-.563-2.375.375-2.813C29.25 16.06 31 13.623 31 11.06c0-4.124-4.563-7.624-10.313-7.624-.938 0-1.875.063-2.75.25l-.188-.938c.937-.188 1.937-.313 2.937-.313C26.937 2.435 32 6.31 32 11.06c0 3.063-2.063 5.813-5.25 7.313-.25.125-.25.875.063 1.563.188.375.5.75.688 1.125v.064c.314.5.44.875.25.938s-.562.063-.937-.063c-.625-.19-1.5-.5-2.25-.94-1-.624-1.688-1.562-2.063-1.5-.625.064-1.188.126-1.813.126-1.313 0-2.563-.125-3.688-.438l.25-1c1.062.313 2.25.438 3.437.438.563 0 1.125 0 1.688-.063.5-.063.813.125 1.313.5.125.063.625.563.813.688.19.19.44.25.626.376.313.188.688.438 1.063.563h-.064zm-21.25 1.063c-.063 0-.125.063-.125.063.313.063.563.375.563.75v.125c.063-.062.063-.187.188-.374 0 0 .314-.375.376-.5.188-.25.25-.5.375-.75.626-1.313.814-2.75-.25-3.25-3.124-1.563-5-4.188-5-7.063C1 6.25 5.815 2.438 11.815 2.438s10.813 3.813 10.813 8.375-4.813 8.375-10.813 8.375c-.438 0-.938 0-1.375-.063-.5-.063-.75.125-1.25.563l-.19.188c-.124.063-.124.125-.187.188-.188.125-.313.188-.438.313-.188.188-.438.313-.625.438-.563.313-1.375.625-2.063.813-.313.063-.563.125-.813.188zm5.5-1.688c-.375-.063-1 .938-2.125 1.563-1.375.813-3.375 1.25-3.813 1.125s.438-1.063.938-2.125c.438-.813.5-1.75.188-1.938C2.25 17.125 0 14.125 0 10.812 0 5.624 5.313 1.5 11.813 1.5s11.813 4.124 11.813 9.312-5.313 9.375-11.813 9.375c-.5 0-.938 0-1.438-.063z' /></g></svg>");
    }

    &.icon-chats-gray {
        background-size: 16px 16px;
        width: 16px;
        height: 16px;
        .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{gray}' d='M26.125 20.75c-.063-.125-.063-.188-.125-.313 0-.063-.063-.063-.063-.125-.5-1.125-.563-2.375.375-2.813C29.25 16.06 31 13.623 31 11.06c0-4.124-4.563-7.624-10.313-7.624-.938 0-1.875.063-2.75.25l-.188-.938c.937-.188 1.937-.313 2.937-.313C26.937 2.435 32 6.31 32 11.06c0 3.063-2.063 5.813-5.25 7.313-.25.125-.25.875.063 1.563.188.375.5.75.688 1.125v.064c.314.5.44.875.25.938s-.562.063-.937-.063c-.625-.19-1.5-.5-2.25-.94-1-.624-1.688-1.562-2.063-1.5-.625.064-1.188.126-1.813.126-1.313 0-2.563-.125-3.688-.438l.25-1c1.062.313 2.25.438 3.437.438.563 0 1.125 0 1.688-.063.5-.063.813.125 1.313.5.125.063.625.563.813.688.19.19.44.25.626.376.313.188.688.438 1.063.563h-.064zm-21.25 1.063c-.063 0-.125.063-.125.063.313.063.563.375.563.75v.125c.063-.062.063-.187.188-.374 0 0 .314-.375.376-.5.188-.25.25-.5.375-.75.626-1.313.814-2.75-.25-3.25-3.124-1.563-5-4.188-5-7.063C1 6.25 5.815 2.438 11.815 2.438s10.813 3.813 10.813 8.375-4.813 8.375-10.813 8.375c-.438 0-.938 0-1.375-.063-.5-.063-.75.125-1.25.563l-.19.188c-.124.063-.124.125-.187.188-.188.125-.313.188-.438.313-.188.188-.438.313-.625.438-.563.313-1.375.625-2.063.813-.313.063-.563.125-.813.188zm5.5-1.688c-.375-.063-1 .938-2.125 1.563-1.375.813-3.375 1.25-3.813 1.125s.438-1.063.938-2.125c.438-.813.5-1.75.188-1.938C2.25 17.125 0 14.125 0 10.812 0 5.624 5.313 1.5 11.813 1.5s11.813 4.124 11.813 9.312-5.313 9.375-11.813 9.375c-.5 0-.938 0-1.438-.063z' /></g></svg>");
    }
}

//toolbar icon
.tabbar {
    a {
        i{
            background-size: @tabIconWidth @tabIconWidth;
        }

        i.icon-plane {
            width: @tabIconWidth;
            height: @tabIconWidth;
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{gray}' d='M32 0L17.562 32l-5.25-11.813L0 14.624zm-4.125 3.438l-24.5 11.188 9.438 4.313zm.25 1.687L13.75 19.938l3.875 8.625z' /></g></svg>");
        }

        i.icon-compass {
            width: @tabIconWidth;
            height: @tabIconWidth;
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{gray}' d='M30.75 16c0-8.125-6.625-14.75-14.75-14.75S1.25 7.875 1.25 16 7.875 30.75 16 30.75 30.75 24.125 30.75 16zM0 16C0 7.187 7.188 0 16 0s16 7.188 16 16-7.188 16-16 16S0 24.812 0 16zm18.313 1.688l-3.563-3.625L25.125 7.25zm.062 0L7.062 25.376l7.688-11.313zm-1.5-.125l-2-2-4.25 6.188z' /></g></svg>");
        }

        i.icon-time {
            width: @tabIconWidth;
            height: @tabIconWidth;
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{gray}' d='M30.75 16c0-8.125-6.625-14.75-14.75-14.75S1.25 7.875 1.25 16 7.875 30.75 16 30.75 30.75 24.125 30.75 16zM0 16C0 7.187 7.188 0 16 0s16 7.188 16 16-7.188 16-16 16S0 24.812 0 16zm16 1.938H7.687v-1.313h7.688v-11.5h1.25v12.813H16z' /></g></svg>");
        }

        i.icon-person {
            width: @tabIconWidth;
            height: @tabIconWidth;
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{gray}' d='M30.75 16c0-8.125-6.625-14.75-14.75-14.75S1.25 7.875 1.25 16 7.875 30.75 16 30.75 30.75 24.125 30.75 16zM0 16C0 7.187 7.188 0 16 0s16 7.188 16 16-7.188 16-16 16S0 24.812 0 16zM13.313 5.188s1.563-.813 3.063-.813c.688 0 .813.438 1.438.5.875.063 3.188 1.188 3.625 2.563.312 1.063.437 3.375.312 4.813-.063.5-.25.94-.313 1.44-.064.187.937.124.874.312-.125.625-.625 2.875-.875 3.5-.064.25-.626.313-.69.5-.437.875-.312 2.75-.562 3.438-.25.563-.5.313-.75 1.125-.438 1.5.313 2.625.75 2.938.875.625 3.75 1.625 5 2.125.25.125-2.188 3.125-6.25 3.688-5.5.75-13-1.25-12.375-3.688 0 0 3.75-1.063 4.5-1.313s1.063-.938 1.25-1.625c.438-1.625-.188-1.688-.813-3.25-.25-.688-.188-2.375-.438-3.063s-.5.063-.75-.563c-.313-.688-.375-.375-.625-1.688-.063-.375-.375-1.688-.438-2.125-.064-.312.562 0 .562-.312 0-1.875-.938-4.313.5-6.25.875-1.188 1.063-1.375 3-2.25z' /></g></svg>");
        }

        i.icon-search {
            width: @tabIconWidth;
            height: @tabIconWidth;
            .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{gray}' d='M23.063 12.188c0-6-4.875-10.938-10.875-10.938S1.25 6.188 1.25 12.188s4.938 10.875 10.938 10.875 10.875-4.875 10.875-10.875zM0 12.188C0 5.5 5.5 0 12.188 0s12.125 5.5 12.125 12.188-5.438 12.125-12.125 12.125S0 18.875 0 12.188zm19.688 9.187l1.813-1.813L31.69 29.75l-1.814 1.813z' /></g></svg>");
        }

        &.active {
            i.icon-plane {
                width: @tabIconWidth;
                height: @tabIconWidth;
                .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{themeColor}' d='M31.875 1.125L18 32l-5.125-11.438zm-20 18.438L0 14.25 30.875.125z' /></g></svg>");
            }

            i.icon-compass {
                width: @tabIconWidth;
                height: @tabIconWidth;
                .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{themeColor}' d='M18.313 17.688L25.126 7.25 14.75 14.063l-7.687 11.25zm-7.625 4l4.188-6.125 1.938 1.938zM16 32C7.187 32 0 24.812 0 16S7.188 0 16 0s16 7.188 16 16-7.188 16-16 16z' /></g></svg>");
            }

            i.icon-time {
                width: @tabIconWidth;
                height: @tabIconWidth;
                .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{themeColor}' d='M16 32C7.187 32 0 24.812 0 16S7.188 0 16 0s16 7.188 16 16-7.188 16-16 16zm0-14.062h.625V5.125h-1.25v11.5H7.687v1.313H16z' /></g></svg>");
            }

            i.icon-person {
                width: @tabIconWidth;
                height: @tabIconWidth;
                .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{themeColor}' d='M16 32C7.187 32 0 24.812 0 16S7.188 0 16 0s16 7.188 16 16-7.188 16-16 16zM13.313 5.188c-1.938.875-2.125 1.063-3 2.25-1.438 1.938-.5 4.375-.5 6.25 0 .313-.625 0-.563.313.063.44.375 1.75.438 2.126.25 1.313.313 1 .625 1.688.25.625.5-.125.75.563s.188 2.375.438 3.063c.626 1.563 1.25 1.625.814 3.25-.188.688-.5 1.375-1.25 1.625s-2.625.813-2.625.813 3.624 2.438 7.624 2.438 8-2.375 7.688-2.5c-1.313-.5-2.938-1.125-3.563-1.563-.44-.313-1.19-1.438-.75-2.938.25-.813.5-.563.75-1.125.25-.688.124-2.563.562-3.438.063-.188.625-.25.688-.5.25-.625.75-2.875.875-3.5.063-.188-.938-.125-.875-.313.063-.5.25-.94.313-1.44.125-1.437 0-3.75-.313-4.812-.438-1.375-2.75-2.5-3.625-2.563-.625-.063-.75-.5-1.438-.5-1.5 0-3.063.813-3.063.813z' /></g></svg>");
            }

            i.icon-search {
                width: @tabIconWidth;
                height: @tabIconWidth;
                .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path fill='@{themeColor}' d='M21.75 12.188c0-5.313-4.25-9.625-9.563-9.625s-9.625 4.313-9.625 9.625 4.313 9.563 9.625 9.563 9.563-4.25 9.563-9.562zm-21.75 0C0 5.5 5.5 0 12.188 0s12.125 5.5 12.125 12.188-5.438 12.125-12.125 12.125S0 18.875 0 12.188zm19.688 9.187l1.813-1.813L31.69 29.75l-1.814 1.813z' /></g></svg>");
            }
        }
    }
}

//列表图片
.list-img {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

//页头图片 normal
.header-img {
    width: 56px;
    height: 56px;
    -webkit-border-radius: 28px;
    border-radius: 28px;
}

//页头图片 small
.header-small-img {
    width: 30px;
    height: 30px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

//小按钮
.small-button {
    min-width: 72px;
    line-height: 22px;
    height: 24px;
    font-size: 12px;
    display: inline-block;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}


//专栏和个人信息页头部
.page-header {
    background-color: @white;
    padding: 15px;
    margin-top: 0;
    background-image: linear-gradient(45deg, @gray1 25%, transparent 25%, transparent 50%, @gray1 50%, @gray1 75%, transparent 75%, transparent);
    background-size: 10px 10px;

    .item-button-row {
        display: block;
        text-align: center;
        padding-top: 3px;
        padding-bottom: 15px;
    }

    &.list-block{
        .item-content {
            .justify-content(center);
        }

        .item-text {
            -webkit-line-clamp: 2;
            text-align: center;
        }

        &.media-list{
            .item-inner {
                width: inherit;
                border-bottom: none;
                padding-top: 15px;
                .item-title {
                    padding-bottom: 4px;
                }
                .item-text {
                    -webkit-line-clamp: 1;
                    text-align: left;
                }
            }
        }



    }

}

//文章列表
.article-list {
    &.list-block{
        .item-content {

        }

        &.media-list{
            .item-inner {

                .item-subtitle {
                    font-size: 12px;
                    color: #ACACAC;
                }

                .item-title {
                    font-weight: 500;
                    margin-bottom: 8px;
                }

                .item-text {
                    font-size: 14px;
                    margin-top: 8px;
                    color:#303030;
                }
            }
        }

        .item-text {
            -webkit-line-clamp: 3;
        }

    }
}



//文章详情
.article-content {
    background-color: @white;

    h1 {
        font-size: 17px;
        font-weight: 600;
        line-height: 1;
    }

    h2 {
        font-size: 16px;
        font-weight: 600;
    }

    .banner {
        height: 140px;
        overflow: hidden;
        img {
            display: block;
            width: 100%;
        }
    }

    .content-block {
        margin: 0;
        font-size: 15px;
        color: #303030;
        line-height: 1.75;
        padding-bottom: 15px;

        img{
            width: 100%;
        }

        ul {
            list-style: inherit;
            padding-left: 30px;
        }
    }

    &.list-block{
        margin-top: 0;

        &.media-list{

            .header-button-group {
                background-image: linear-gradient(45deg, @gray1 25%, transparent 25%, transparent 50%, @gray1 50%, @gray1 75%, transparent 75%, transparent);
                background-size: 10px 10px;
                a, .item-after {
                    font-size: 12px;
                    color: #ACACAC;
                }

                a {
                    margin-right: 6px;
                }
            }

            .item-inner {
                border-bottom: none;
                .item-subtitle {
                    font-size: 12px;
                    color: #ACACAC;
                }

                .item-title {
                    font-size: 12px;
                    font-weight: 500;
                    margin-bottom: 2px;
                }
            }
        }

    }
}
